<template>
  <el-form ref="bookForm" :model="bookForm" :rules="rules" label-width="8em" label-position="left">
    <el-row type="flex" justify="space-around">
      <el-col :span="8">
        <el-form-item label="会议开始时间:" required prop="starttime">
          <el-date-picker v-model="bookForm.starttime" type="datetime" placeholder="请选择日期" prefix-icon="el-icon-date" value-format="timestamp" :picker-options="pickerOption" style="width: 100%;" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="会议时长:" required>
          <el-input v-model="bookForm.size" type="number" placeholder="请输入会议时长">
            <template slot="append">
              分钟
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="8">
        <el-form-item label="会议人数:" required>
          <el-input v-model="bookForm.expectsize" type="number" placeholder="请输入会议人数" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="会议室楼层:" required>
          <el-select v-model="bookForm.floor" placeholder="请选择会议室楼层" style="width: 100%;">
            <el-option v-for="item in 4" :key="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="8">
        <el-form-item label="会议主题:" required>
          <el-input v-model="bookForm.theme" placeholder="请输入会议主题" />
        </el-form-item>
      </el-col>
      <el-col :span="8" style="display: flex;">
        <el-form-item label="设备要求:" required>
          <el-checkbox v-model="bookForm.media" :true-label="1" :false-label="0">
            多媒体
          </el-checkbox>
          <el-checkbox v-model="bookForm.airconditioner" :true-label="1" :false-label="0">
            空调
          </el-checkbox>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="8" style="display: flex;">
        <el-checkbox v-model="bookForm.attendance" :true-label="1" :false-label="0">
          会议需要签到
        </el-checkbox>
        <el-checkbox v-model="bookForm.invite" :true-label="1" :false-label="0">
          允许成员邀请成员
        </el-checkbox>
      </el-col>
      <el-col :span="8" />
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" style="width: 100%;font-size: 20px;letter-spacing: 2em;" @click="handleBook">
          提<span style="letter-spacing: 0;">
            交
          </span>
        </el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { bookMeetingAuto } from '@/api/meeting'

export default {
  data() {
    return {
      bookForm: {
        theme: '',
        expectsize: undefined,
        starttime: '',
        endtime: '',
        attendance: 0,
        invite: 0,
        floor: undefined,
        airconditioner: 0,
        media: 0,
        size: 30
      },
      bookForm2: {
        theme: '',
        expectsize: undefined,
        starttime: '',
        endtime: '',
        attendance: 0,
        invite: 0,
        floor: undefined,
        airconditioner: 0,
        media: 0,
        size: 30
      },
      rules: {},
      pickerOption: {
        disabledDate: this.disabledDate
      }
    }
  },
  methods: {
    disabledDate(date) {
      const d = date.getTime()
      const now = new Date().getTime()
      return d < now - 24 * 60 * 60 * 1000 || d > now + 10 * 24 * 60 * 60 * 1000
    },
    handleBook() {
      this.$refs.bookForm.validate(async valid => {
        if (valid) {
          const meeting = {}
          Object.assign(meeting, this.bookForm)
          meeting.starttime /= 1000
          meeting.endtime = meeting.starttime + meeting.size * 60
          console.log(meeting)
          const res = await bookMeetingAuto(meeting)
          if (!res.data.code) {
            this.$notify({
              title: '成功',
              message: '预约成功',
              type: 'success',
              duration: 2000
            })
            this.bookForm = { ...this.bookForm2 }
            this.$refs.bookForm.resetFields()
          }
        } else {
          this.$notify({
            title: '失败',
            message: '信息填写不符合要求',
            type: 'error',
            duration: 2000
          })
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.el-form {
  margin-top: 30px;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.el-form-item >>> label,
.el-checkbox >>> .el-checkbox__label,
.el-form-item >>> .el-form-item__content
{
  font-size: 20px;
}

.el-form-item >>> .el-input,
{
  font-size: 18px;
}

.el-col >>> .el-checkbox {
  font-weight: 400;
}

</style>
